<script setup lang="ts">

import {defineProps, PropType} from 'vue';

import {SyncServiceSetting} from "@/utils/config";
import {saveConfig} from "@/utils/componentUtils";
import {useRouter} from "vue-router";

const props = defineProps({
  syncServiceSetting: {
    type: Object as PropType<SyncServiceSetting>,
    required: true,
  },
  name: {
    type: String,
    required: true,
  },
  settingRoute: {
    type: String,
    required: true,
  },
  iconPath: {
    type: String,
    required: false,
  },
  description: {
    type: String,
    required: false,
  },
});

// console.log("props", props);

const router = useRouter();

function navigateToSettingRoute() {
  router.push({ path: `${router.currentRoute.value.path}/${props.settingRoute}` });
}

</script>

<template>
  <el-card class="sync-card" shadow="hover">
    <template #header>
      <div class="sync-card-header">
        <div class="sync-card-header-left">
          <img class="sync-card-header-img" :src="props.iconPath" alt="卡片Icon" v-if="!!props.iconPath">
          <span class="sync-card-header-title">{{ props.name }}</span>
        </div>
        <el-switch
            v-model="props.syncServiceSetting.enable"
            :disabled="!props.syncServiceSetting.canEnable"
            @change="saveConfig"
        >
        </el-switch>
      </div>
    </template>
    <template #default>
      <div class="sync-card-body">
        <span>{{ props.description }}</span>
      </div>
    </template>
    <template #footer>
      <div class="sync-card-footer">
        <el-button plain @click="navigateToSettingRoute">进入设置</el-button>
      </div>
    </template>
  </el-card>

</template>

<style>
.sync-card {
  min-width: 300px;
  width: 45%;
}
.sync-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.sync-card-header-left {
  display: flex;
  align-items: center;
}
.sync-card-header-img {
  width: 32px;
  margin-right: 5px;
}
.sync-card-header-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  user-select: none;
}
.sync-card-body {
  user-select: none;
  text-indent: 2em; /* 这里设置首行缩进为 2 个字符宽度 */
}
.sync-card-footer {
  display: flex;
  justify-content: flex-end;
}
</style>